<template>
	<view class="signIn">
		<!-- <uni-nav-bar statusBar fixed dark class="navBar" left-icon="left" :height="'88rpx'" :title="'订单详情'"
			:fontSize="'36rpx'" :color="'#F4F4F4'" :border="false" @clickLeft="back"></uni-nav-bar> -->

		<view class="position-absolute" style="top:0;bottom:calc(374rpx + 108rpx);left:0;right:0;z-index: 1;">
			<map level :circles="circles" :longitude="longitude" :scale="scale" :latitude="latitude" :markers="covers"
				v-show="maphidden" />
		</view>

		<view class="position-absolute b-liuhai" style="right:16rpx;bottom:558rpx">
			<image @tap="chooseLocation" :src="imgUrl+'images/orderImg/img04.png'" mode="" class="img"
				style="width:148rpx;height:148rpx;"></image>
		</view>

		<view class="tool-fixed bg_fff" style="border-top-left-radius:40rpx;border-top-right-radius:40rpx;">
			<view style="color: #46D17E;font-size: 37rpx;padding-left: 35rpx;padding-top: 5rpx;" @click="go">返回</view>
			<view class="p-15">
				<view class="dd-flex">
					<image :src="data.user.avatar" mode="aspectFill" class="img border-radius-100"
						style="width:88rpx;height:88rpx;"></image>
					<view class="flex1 p-l10">
						<view class="f-s14 f-w700">尾号{{data.address.mobile.substr(-4)}}
						</view>
						<!-- <view class="f-s12 co_666 p-t3">信用分98 | 好评率95%</view> -->
						<!-- <view class="f-s12 co_666 p-t3">信用分{{data.praise}} | 好评率{{data.praise}}%</view> -->
					</view>
					<image v-if="data.status==2||data.status==3||data.status==4||data.status==5"
						@tap="call(data.address.mobile)" :src="imgUrl+'images/orderImg/img03.png'" mode="" class="img"
						style="width:80rpx;height:80rpx;"></image>
				</view>
				<view class="d-flex align-items-center p-t20">
					<view class="f-s16 f-w700">
						服务时间{{data.appointment_time}}</view>
					<view class="f-s12 bg_000 co_fff border-radius-3 line-h150 p-l5 p-r5 m-l15">时长</view>
					<view class="f-s14 co_666 p-l3">{{data.all_duration*60}}分钟</view>
				</view>
				<view class="d-flex justify-content-space-between f-s12 p-t5">
					<view class="p-r20 co_666">
						服务地址：{{data.address.province}}{{data.address.city}}{{data.address.district}}{{data.address.address}}
					</view>
					<!-- <text class="f-s12 co_999">{{data.distance}}km</text> -->
				</view>
				<view class="dd-flex p-t20 p-b5">
					<!-- <view class="border-radius-100 co_fff f-s12 text-center"
						style="width:88rpx;line-height:40rpx;background:#7C94FB;border-bottom-right-radius:0!important;">
						SPA
					</view> -->
					<view style="display: flex;flex-direction: column; width: 60%;">
						<view class="f-s16 f-w700 p-l5 flex1 p-r20 webkit-line-clamp-1"
							v-for="(im,inx) in data.services ">{{im.name}}
							<text class="text1">×{{im.number}}</text>
						</view>

					</view>

					<view class="dd-flex f-w700 co_000 f-s20">
						<view class="f-s12 co_666 f-w400 p-t5">预估收入</view>
						<view class="f-s14 p-t3">￥</view>
						<view>{{data.technician_money}}</view>
					</view>
				</view>
			</view>
			<view class="p-15 p-t10 p-b10 " style="box-shadow:0 -8rpx 16px rgba(0,0,0,.06);">
				<view class="regiter-bottom gray border-radius-6 p-l20 p-r20 flex1" v-if="data.status==6">该订单已完成</view>
				<view class="regiter-bottom gray border-radius-6 p-l20 p-r20 flex1" v-if="data.status==-1">该订单已取消</view>

				<template v-if="data.status==1 || data.status==2">
					<!-- <view class="regiter-bottom gray border-radius-6 p-l20 p-r20" @click="cancel" id="quxiao">申请取消
					</view> -->
					<view v-if="data.status==1" class="flex-row-space-around">
						<view class=" button flex-row-center" @click="cancel" id="quxiao">取消订单</view>
						<view class=" button flex-row-center " @click="cancel" id="jiedan">确认接单</view>
					</view>

					<view class="flex1 regiter-bottom border-radius-6 m-l10" @click="cancel" id="fuwu"
						v-if="data.status==2">开始服务</view>
				</template>

				<view class="regiter-bottom border-radius-6 p-l20 p-r20 flex1" v-if="data.status==3">服务进行中</view>
			</view>
			<view class="b-liuhai"></view>
		</view>

		<u-modal :show="show" :showCancelButton='true' :content='content' @cancel="cancerlser" @confirm="confirm">
		</u-modal>
		<view>
			<u-modal :show="yanzhengmashow" title="请输入服务确认码" showCancelButton="true" @cancel="cancel1()"
				@confirm="kaishifuwu()">
				<view class="yanzheng">
					<u-code-input v-model="value" mode="box" :maxlength="6"></u-code-input>
				</view>
			</u-modal>

			<!-- <u-button @click="show = true">打开</u-button> -->
		</view>
		<view>
			<u-modal :show="yuanyinshow" title="请选择取消原因" showCancelButton="true" @cancel="cancel2()"
				@confirm="quxiao()">
				<view class="yanzheng">
					<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in yuanyinlist" :key="index"
							:label="item.name" :name="item.id" @change="radioChange">
						</u-radio>
					</u-radio-group>
					<!-- 	<view class="" v-for="(item,index) in " :key="index">
						{{item.cancel_desc}}
					</view> -->
				</view>
			</u-modal>

			<!-- <u-popup :show="yuanyinshow" @close="close" @open="open">
				<view>
					<view class="" v-for="(item,index) in yuanyinlist" :key="index">
						{{item.cancel_desc}}
					</view>
				</view>
			</u-popup> -->


			<!-- <u-button @click="show = true">打开</u-button> -->
		</view>
	</view>
</template>

<script>
	// 获取订单详情
	import {
		orderDetails
	} from "./api.js";
	export default {
		data() {
			return {
				radiovalue1: '',
				value: '',
				//地图的显示与隐藏
				yuanyinshow: false,
				yuanyinlist: [],
				maphidden: true,
				show: false,
				content: '',
				id: '',

				order_sn: 'O2022012452555599',
				data: {
					user: {
						phone: ''
					},
					address: {}
				},
				yanzhengmashow: false,
				imgUrl: this.$store.state.imgUrl,
				circles: [],
				signIn: false, //签到状态
				radius: 2, //区域半径
				latitude: 26.22,
				longitude: 111.63,
				scale: 13,
				covers: [{
					title: 'sss11111',
					latitude: 26.22,
					longitude: 111.63,
					iconPath: this.$store.state.imgUrl + 'dt.png',
					width: "60rpx",
					height: "60rpx",
					callout: {}
				}],
				yuanyinid: '',
			};
		},
		onLoad(e) {
			if (e.order_sn) this.order_sn = e.order_sn;
			this.maphidden = true
		},
		onShow() {
			this.chushihua();
			this.$db.http('technician/cancelOrderDesc', {

			}).then(res => {
				if (res.code == 200) {
					console.log(res, 'hahahhahhh');
					this.yuanyinlist = res.data
					this.yuanyinlist.forEach((item1, index1) => {

						item1.name = item1.cancel_desc
						item1.disabled = false

					})
				}
			})

		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
				this.yuanyinid = n
			},
			radioChange(n) {
				console.log('radioChange', n);
				this.yuanyinid = n
			},
			go() {
				uni.switchTab({
					url: '/pages/order/order'
				})
			},
			// 页面初始化
			chushihua() {
				this.maphidden = true
				uni.showLoading({
					title: '加载中'
				})
				this.$db.http('technician/order/detail', {
					order_sn: this.order_sn
				}).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						this.data = res.data
						this.latitude = res.data.address.latitude
						this.longitude = res.data.address.longitude
						this.covers[0].latitude = res.data.address.latitude
						this.covers[0].longitude = res.data.address.longitude
						this.covers[0].callout = {
							content: '客户地址：' + res.data.address.province + res.data.address.city + res.data
								.address.district + res.data.address.address,
							bgColor: '#fff',
							color: '#000',
							fontSize: 14,
							padding: 7,
							borderWidth: 1,
							borderColor: '#e4e4e4',
							borderRadius: 5,
							display: 'ALWAYS',
						}

						// 若订单正在服务中，直接跳转至服务详情
						if (res.data.order_status == 3 || res.data.order_status == -1) {
							uni.redirectTo({
								url: '/page-index-subcontract/orderIng/index?order_sn=' + this.order_sn
							})
						}
					}
				})
			},

			// 选择位置
			chooseLocation() {
				let _this = this
				let latitude = Number(_this.data.lat);
				let longitude = Number(_this.data.lng);
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: '服务地址',
					address: _this.data.province + _this.data.city + _this.data.district + _this.data.address,
					success: function() {
						console.log('success');
					}
				});
			},

			// 返回上一级
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},

			confirm() {
				/* this.show = false */
				if (this.id == 'jiedan') {
					uni.showLoading({
						title: '加载中'
					})
					this.$db.http('technician/affirm/order', {
						order_sn: this.order_sn
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '接单成功'
							})
							setTimeout(() => {
								this.chushihua()
							}, 1000)
							// this.yy = res.data
						}
					})
					// this.url('')
				}
				if (this.id == 'fuwu') {
					uni.showLoading({
						title: '加载中'
					})
					this.$db.http('technician/begin/order', {
						order_sn: this.order_sn,
						confirm_code: this.value
					}).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							this.navigateTo('/page-index-subcontract/orderIng/index?order_sn=' + this.order_sn)
							// this.yy = res.data
						}
					})
					// this.url('')
				}
			},
			cancerlser() {
				// 用户点击取消
				this.maphidden = true
				this.show = false
			},
			cancel1() {
				// 用户点击取消
				this.yanzhengmashow = false
				this.maphidden = true
			},
			cancel2() {
				// 用户点击取消
				this.yuanyinshow = false
				this.maphidden = true
			},
			quxiao() {
				this.yuanyinshow = false
				this.maphidden = true
				var that = this
				console.log(this.yuanyinid, ' this.yuanyinid this.yuanyinid this.yuanyinid');
				this.$db.http('technician/cancel/order', {
					order_sn: this.order_sn,
					cancel_reason: this.value,
					cancel_desc_id: this.yuanyinid

				}).then(res => {
					if (res.code == 200) {
						uni.hideLoading()
						that.chushihua();
						// this.navigateTo('/page-index-subcontract/orderIng/index?order_sn=' + this.order_sn)
						// this.yy = res.data
					}
				})
			},
			cancel(e) {
				// this.show = true

				this.maphidden = false
				let {
					id
				} = e.target;
				this.id = id;
				if (id == 'quxiao') {
					this.yuanyinshow = true
					// uni.showModal({
					// 	content: '确定取消订单？',
					// 	success: (res) => {
					// 		if (res.confirm) {
					// 			this.quxiao()
					// 		} else {
					// 			console.log('cancel') //点击取消之后执行的代码
					// 		}
					// 	}
					// })
					return
				}
				if (id == 'jiedan') {

					uni.showModal({
						content: '是否确认接单？',
						success: (res) => {
							if (res.confirm) {
								this.confirm()
							} else {
								console.log('cancel') //点击取消之后执行的代码
							}
						}
					})


				}
				if (id == 'fuwu') {
					this.yanzhengmashow = true

				}
			},

			kaishifuwu() {
				console.log(this.value, 'hahha ');
				// this.value = ''
				this.yanzhengmashow = false
				this.confirm()
				// uni.showModal({
				// 	content: '是否可以开始服务？',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			this.confirm()
				// 		} else {
				// 			console.log('cancel') //点击取消之后执行的代码
				// 		}
				// 	}
				// })
			},
			call(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			navigateTo(e) {
				uni.navigateTo({
					url: e
				})
			}
		},
	};
</script>

<style lang="less">
	.yanzheng {
		padding: 30rpx;
		background-color: #fff;
	}

	.button {
		width: 300rpx;
		height: 84rpx;
		background: linear-gradient(135deg, #46D17E 0%, #3EC735 100%);
		border-radius: 8rpx;
		margin-right: 24rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;

	}

	map {
		width: 100%;
		height: 100%;
	}

	.signIn {
		width: 100%;
		height: 100%;

		.currentlocation {
			position: relative;
			background: #fff;
			width: 686rpx;
			height: 308rpx;
			border-radius: 16rpx;
			margin: 0 auto;
			padding-left: 24rpx;

			.currentlocation-bg {
				position: absolute;
				right: 0;
				top: 0;
				width: 172rpx;
				height: 172rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.currentlocation-top {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				height: 88rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #262626;


				.img {
					width: 44rpx;
					height: 44rpx;
					margin-right: 8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.currentlocation-center {
				font-size: 28rpx;
				font-weight: 500;
				color: #262626;
			}

			.currentlocation-bottom {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				margin-bottom: 20rpx
			}

			.currentlocation-clicksignin {
				height: 112rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.currentlocation-clicksignin-left {
					height: 100%;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: 500;
					color: #46D17E;

					view {
						margin-top: -3rpx;
						margin-right: 10rpx;
					}
				}

				.currentlocation-clicksignin-right {
					width: 160rpx;
					height: 64rpx;
					background: linear-gradient(135deg, #46D17E 0%, #3EC735 100%);
					border-radius: 8rpx;
					margin-right: 24rpx;
					text-align: center;
					line-height: 64rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;

				}
			}
		}

		.map-loctionMap {
			margin: 0 auto;
			width: 686rpx;
			height: 792rpx;
			margin-top: 26rpx;
			background: #fff;


			.locationmap-top {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 96rpx;
				padding: 0 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #262626;

				.locationmap-top-counter {
					box-sizing: border-box;
					width: 176rpx;
					height: 56rpx;
					background: #F7F8F9;
					border-radius: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;

					.add {
						width: 28rpx;
						height: 28rpx;
						margin-top: -8rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.cut {
						width: 28rpx;
						height: 28rpx;
						margin-top: -30rpx;

						image {
							width: 100%;
							height: 21.4%;
						}
					}

					.num {
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
					}
				}


			}

			.locationmap-map {
				box-sizing: border-box;
				padding: 24rpx 24rpx 32rpx 24rpx;
				width: 100%;
				height: 695rpx;


			}
		}
	}

	.text1 {
		font-size: 24rpx;
		color: #999;
		font-weight: 400;
	}
</style>